<template>
  <div class="shareList">
    <hmNavBar path="/home/find" title="面试分享"></hmNavBar>
    <!-- van-search
            v-model:双向绑定
            show-action:是否显示右边取消按钮
            @search="回车执行相应搜索"
            @cancel="点击了取消按钮执行"
    -->
    <div class="content">
      <van-search
        class="search"
        v-model="inputValue"
        show-action
        @search="search"
        @cancel="cancel"
      >
        <!-- 上拉加载分页
      van-list
        v-model:是否处于加载中,true:正处于加载中,false:当次(当前页)加载完成,上拉过程中自动变成true,离底部小于300px就会触发
        finished:是否加载完成,(是否到了最后一页)  false:加载没有完成 true加载已完成(停止加载(不再执行load方法))
        finished-text:如果到了最后一面.最下面显示的文本内容
        @load="上拉过程中触发的方法"
      -->
      </van-search>
      <div v-if="showList">
        <van-list
          v-if="bol"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多数据"
          @load="load"
        >
          <shareItem
            v-for="(item, index) in list"
            :key="index"
            :info="item"
          ></shareItem>
        </van-list>
      </div>
      <div v-else class="history">
        <h3 class="history-title">大家都在搜</h3>
        <van-tag
          class="tag"
          color="#f7f4f5"
          text-color="#9595a5"
          v-for="(item, index) in historyList"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</van-tag
        >

        <van-cell center>
          <template #title>
            <h3 class="history-title">历史搜索</h3>
          </template>
          <template #default>
            <div class="clear" @click="clear">清空</div>
          </template>
        </van-cell>
        <van-tag
          class="tag"
          color="#f7f4f5"
          text-color="#9595a5"
          v-for="(item, index) in localList"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</van-tag
        >
      </div>
    </div>
  </div>
</template>

<script>
import ShareItem from './ShareItem'
import { articlesShare, articlesShareTopSearch } from '@/api/find.js'
import { setLocal, getLocal } from '@/utils/local.js'
export default {
  components: {
    ShareItem
  },
  data () {
    return {
      inputValue: '',
      list: [],
      currentPage: 0,
      pagesize: 9,
      loading: false, // 是否处于加载过程中  true:正在加载(滚动条小于300,它自动变成true,自动执行load方法),false加载完成
      finished: false, // 是否加载完成  true:加载完成,(不再执行load方法) false:没加载完成
      bol: true,
      showList: true,
      historyList: [],
      localList: JSON.parse(getLocal('history')) || [] //当前搜索历史  字符串转数组
    }
  },
  async created () {},
  methods: {
    // 上拉加载方法
    async load () {
      /*
        1   2    start:0    (1-1)*2
        2   2    start:2    (2-1)*2
        3   2    start:4    (3-1)*2
        */
      //    加载一次分页增加1
      this.currentPage++
      const _q = {
        start: (this.currentPage - 1) * this.pagesize,
        limit: this.pagesize,
        q: this.inputValue
      }
      const res = await articlesShare(_q)
      res.data.data.list.forEach(item => {
        // 去掉空字符串情况
        if (this.inputValue.trim() !== '') {
          // 得到以inputValue作分割的数组
          let _title = item.title.split(this.inputValue)
          item.title = _title.join(
            `<span style='color:red'>${this.inputValue}</span>`
          )
        }
      })
      //   获取到数据后将数据添加到列表
      this.list.push(...res.data.data.list)
      //   将v-model的值修改为flase表示 当次加载完成
      this.loading = false
      //   判断 是否所有数据加载完成,如果所有数据加载完成,将finished修改为true
      if (res.data.data.total <= this.list.length) {
        this.finished = true
      }
      // this.list = res.data.data.list
      window.console.log(res)
    },
    //   搜索
    search () {
      // 还原数据
      this.list = []
      this.currentPage = 0
      this.loading = false
      //   只是为了让van-list组件重新激活重新加载数据
      this.finished = false
      /*  this.finished = false
      this.$nextTick(() => {
        this.finished = false
      }) */
      this.showList = true
      // van-list前面加载完成后,你还原了相应数据它识别不到,我们需要让它重新启动
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      if (this.inputValue.trim() !== '') {
        this.localList.unshift(this.inputValue)
        // 去重
        this.localList = [...new Set(this.localList)]
        // 限制长度
        // splice(从哪开始,删除多少位数据,插入什么数据),可以改变原数组
        //  [0,1,2,3].splice(1,1)   [0,2,3]
        this.localList.splice(5)
        // 本地存储 数组转字符串
        setLocal('history', JSON.stringify(this.localList))
      }
    },
    // 取消
    async cancel () {
      this.showList = false
      if (this.historyList.length === 0) {
        const res = await articlesShareTopSearch()
        window.console.log(123)
        this.historyList = res.data.data
      }
    },
    tagClick (str) {
      this.inputValue = str
      this.search()
    },
    // 清空
    clear () {
      this.localList = []
      // 点击清空做一个数组清空处理并存储 数组转化成字符串
      setLocal('history', JSON.stringify(this.localList))
    }
  }
}
</script>

<style lang="less" scoped>
.shareList {
  .content {
    padding: 0 @p15;
  }
  .search {
    padding-left: 0;
    padding-right: 0;
  }
  .history {
    .history-title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 600;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      margin-top: 30px;
    }
    .clear {
      margin-top: 30px;
    }
    .van-cell {
      padding: 0;
    }
    .tag {
      padding: 6px 8px;
      margin-top: 15px;
      margin-right: 15px;
    }
  }
}
</style>
